﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div template="login" dropdown-language="language">
        <table cellpadding="0" cellspacing="0" style="width:418px" id="loginForm">
            <tr>
                <td></td>
            </tr>
            <tr>
                <td style="height:55px;min-height:55px">&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <span class="font-size-level-1" style="color:#fff">{{$$$res("SignIn","Sign in")}}</span>
                </td>
            </tr>
            <tr>
                <td style="min-height:75px;margin:0px;padding:0px" valign="top">
                    <input id="username" class="k-textbox font-size-20" 
                           placeholder='{{$$$res("placeholderEnterUserName","Nhập username")}}' 
                           style="height: 55px; width: 100%; background-color: transparent !important; color: white !important; border: solid 1px #fff !important; " ng-model="info.UserName" />
                </td>
            </tr>
            <tr>
                <td style="min-height:75px;margin:0px;padding:0px" valign="top">
                    <input id="password" type="password" placeholder='{{$$$res("placeholderEnterPassword","Nhập mật khẩu")}}' class="k-textbox font-size-20" style="height: 55px; width: 100%; background-color: transparent !important; color: white !important; border: solid 1px #fff !important; " ng-model="info.Password" />
                </td>
            </tr>
            <tr ng-if="isWaiting">
                <td>
                    <progress class="indeterminate" style="width:100%;display:block"></progress>
                </td>
            </tr>
            <tr>
                <td align="right" style="min-height:75px;margin:0px;padding:0px" valign="top">
                    <input type="button" value='{{$$$res("btnlogin","Login")}}' ng-click="doLogin();" style="width:173px;height:55px" class="font-size-20" />
                </td>
            </tr>

        </table>

        <div id="language" style="position:fixed;right:800px;top:102px; width: 300px;height:49px" class="font-size-30"
             ng-click="doShowSelectedLanguage();">
            <table>
                <tr>
                    <td>
                        <img id="flag" />
                    </td>
                    <td style="width:100%">
                        <span class="font-size-30" style="color: #fff; font-weight: bold; white-space: nowrap">
                            {{getLanguage()}}
                        </span>
                    </td>
                    <td style="font-size:30pt;color:#fff">▼</td>
                </tr>
            </table>

        </div>
        <div id="langDropdown" style="position:absolute;display:none;width:340px" class="dropdown">
            <table style="width:100%">
                <tr class="item">
                    <td>
                        <img src="/Assets/icons/flag-02.png" />
                    </td>
                    <td style="white-space:nowrap">
                        <span class="font-size-20" style="color:#fff;font-weight:bold;white-space:nowrap" ng-click="changeLanguage('vn');">
                            {{$$$res('vn','Tiếng Việt','LanguageCode')}}
                        </span>
                    </td>
                </tr>
                <tr class="item">
                    <td>
                        <img src="/Assets/icons/flag-01.png" />
                    </td>
                    <td>
                        <span class="font-size-20" style="color:#fff;font-weight:bold" ng-click="changeLanguage('en');">
                            {{$$$res('en','English','LanguageCode')}}
                        </span>
                    </td>
                </tr>
            </table>

        </div>
    </div>
    <script>
        var scope = this;
        scope.info = {
            
        };
        scope.getLanguage = function () {
            if (ngW8.$("$lang").$getLanguageCode() == "vn") {
                $("#flag").attr("src", "/Assets/icons/flag-02.png");
                return "Tiếng Việt";
            }
            if (ngW8.$("$lang").$getLanguageCode() == "en") {
                $("#flag").attr("src", "/Assets/icons/flag-01.png");
                return "English";
            }
        }
        scope.changeLanguage = function (code) {
            $("#langDropdown").hide();
            $("#langDropdown").data().HasShow = false;
            ngW8.$("$lang").$setLanguageCode(code);
            ngW8.$("$wslang").$apply(scope);


        };
        scope.doShowSelectedLanguage = function () {
            if (!$("#langDropdown").data().HasShow) {
                $("#langDropdown").appendTo("body");
                $("#langDropdown").css("left", $("#language").position().left + $("#language").width() - $("#langDropdown").width());
                $("#langDropdown").css("top", $("#language").position().top + $("#language").height());
                $("#langDropdown").data().HasShow = true;
                $("#langDropdown").show();

            }
            else {
                $("#langDropdown").hide();
                $("#langDropdown").data().HasShow = false;
            }
        };
        scope.doHideSelectedLanguage = function () {
            $("#langDropdown").hide();
        }

        scope.doLogin = function () {
            var info = angular.element(scope.$find("#loginForm")[0]).scope().info;
            if ((angular.isUndefined(info.UserName)) ||
                (info.UserName == null) ||
                (info.UserName == "")) {
                ngW8.$("$msg").$show(scope.$$$res("MsgEnterUserName", "Xin nhập vào Username"), function () {
                    $("#username").focus();
                });
               
                return;
            }
            if (angular.isUndefined(info.Password) ||
                (info.Password == null) ||
                (info.password == "")) {
                ngW8.$("$msg").$show(scope.$$$res("MsgEnterPassword", "Xin nhập vào mật khẩu"), function () {
                    $("#password").focus();
                });
                return;
            }
            scope.isWaiting = true;

            WS.$call("System/Login", { loginModel: { userId: info.UserName, password: info.Password } }, function (res) {

                if (res.TokenID == null) {
                    ngW8.$("$msg").$show(scope.$$$res("LoginFail", "Đăng nhập không thành công (tài khoản không tìm thấy hoặc sai mật khẩu)"));
                    scope.isWaiting = false;
                    scope.$apply();
                }
                else {
                    res.Username = scope.UserName;
                    ngW8.$("$store").$set("UserInfo", res);
                    scope.isWaiting = false;
                    ngW8.$("$loader").$load(scope.$root, "/hubpage/hubpage.html", function (hubScope, ele) {
                        $("body").html("");
                        ele.appendTo($("body")[0]);
                    });

                }
            }, function (error) {
                HideBusy('loginBusy');

            });
        };
        scope.$$$ready(function () {
            scope.$$$res("LoginFail", "Đăng nhập không thành công (sai tài khoản hoặc mật khẩu)");
            scope.$$$res("MsgEnterUserName", "Xin nhập vào Username");
            scope.$$$res("MsgEnterPassword", "Xin nhập vào mật khẩu");
            scope.$apply();
        });

    </script>
</body>
</html>